<!DOCTYPE html>
<html>

<head>

    {include file="Public/header"}
    <style>
        .row {
            margin: 0;
            padding: 0
        }

        .div_H {
            min-height: 50px;
        }

        .btn {
            margin: 0 10px;
        }

        .colorRed {
            color: red;
        }

        .inputremindPeple {
            max-width: 200px;
            height: 26px;
            display: inline-block;
        }
    </style>

</head>

<body class="white-bg" style="color:#333;padding:3px;">
<div class="row white-bg setRemindPeopleK" style="margin:10px">
    <form action="" id="add">

        {if $s_id}
        <input type="hidden" id="s_id" name="s_id" value="{$s_id}">
        {/if}

        <div class="form-group">
            <table class="table table-bordered white-bg">
                <tr>
                    <td class="text-right"><label for="">经销商</label><span class="colorRed">*</span></td>
                    <td colspan="3">
                        <div class="row">
                            <div class="col-xs-5">
                                <div class="input-group" id="jxs_input" {if isset($supply)}style="display:none;"{/if}>
                                    <input type="text" class="form-control inputremindPeple" id="remainMan" name="jxs" value="{:isset($supply)?$supply.jxs:''}">
                                    <div class="input-group-btn">
                                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                        </ul>
                                    </div>
                                </div>
                                <div id="jxs_queding" class="selectedOnlyOne" {if !isset($supply)}style="display:none;"{/if}>
                                    <span class="inin">{:isset($supply)?$supply.jxs_title:''}</span>
                                    <span class="close">×</span>
                                </div>
                            </div>
                            <div class="col-xs-2">
                                <button class="btn btn-primary" id="select">选择</button>
                            </div>
                        </div>

                    </td>
                </tr>
                <tr>
                    <td class="text-right"><label for="">供应品牌</label><span class="colorRed">*</span></td>
                    <td colspan="3">
                        <div class="row">
                            <div class="col-xs-5">
                                <div class="input-group" id="brands_input">
                                    <input type="text" class="form-control inputremindPeple" id="provideName" name="brands">
                                    <div class="input-group-btn">
                                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                        </ul>
                                    </div>
                                </div>
                                <div id="brands_queding" class="selectedOnlyOne" style="display: none;">
                                    <span class="inin"></span>
                                    <span class="close">×</span>
                                </div>

                            </div>
                            <div class="col-xs-2">
                                <button class="btn btn-primary" id="select_brands">选择</button>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td colspan="3" style="position:relative;">
                        <div class="duoxuan" id="renyuan">
                            {if isset($supply)&&is_array($supply.brands)}
                            {volist name="supply.brands" id="row"}
                            <span class="ren" data-id="{$row.id}"><span class="inin">{$row.title}</span><span class="close">×</span></span>
                            {/volist}
                            {/if}
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="text-right"><label for="">供应品类</label></td>
                    <td colspan="3">
                        <div class="row">
                            <div class="col-xs-5">
                                <div class="input-group" id="category_input">
                                    <input type="text" class="form-control inputremindPeple" id="categoryName" name="category">
                                    <div class="input-group-btn">
                                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                        </ul>
                                    </div>
                                </div>
                                <div id="category_queding" class="selectedOnlyOne" style="display: none;">
                                    <span class="inin"></span>
                                    <span class="close">×</span>
                                </div>

                            </div>
                            <div class="col-xs-2">
                                <button class="btn btn-primary" id="select_category">选择</button>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td colspan="3" style="position:relative;">
                        <div class="duoxuan" id="renyuan2">
                            {if isset($supply)&&is_array($supply.category)}
                            {volist name="supply.category" id="row"}
                            <span class="ren" data-id="{$row.id}"><span class="inin" >{$row.title}</span><span class="close">×</span></span>
                            {/volist}
                            {/if}
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="text-right">描述<span class="colorRed">*</span></td>
                    <td colspan="3">
                        <textarea name="beizhu" id="beizhu" class="form-control" style="user-select:none">{if isset($supply)}{$supply.brief}{/if}</textarea>(100)
                    </td>
                </tr>
            </table>
            <div class="col-md-12 white-bg" style="padding: 20px 0;text-align: center;">
                <button class="btn btn-success" type="submit" id="tijiao">提交</button>
                <button class="btn btn-danger " id="cancelBack">返回</button>
            </div>
        </div>
    </form>
</div>

<!-- 全局js -->
{include file="Public/footer"}
<script src="__STATIC__/layout/js/plugins/suggest/bootstrap-suggest.min.js"></script>
<script>
    $('#cancelBack').click(function () {
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
        return false
    })
    $(function () {
        $('body').on('click','.ren .close',function () {
            $(this).closest('.ren').remove()
        })
        //经销商搜索自动补全
        $("#remainMan").bsSuggest({
            url: "{:url('select/jxsjson')}",
            /*effectiveFields: ["userName", "shortAccount"],
             searchFields: [ "shortAccount"],*/
            effectiveFieldsAlias:{title: "名称"},
            ignorecase: true,
            showHeader: true,
            showBtn: false,     //不显示下拉按钮
            delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
            idField: "id",
            keyField: "title",
            clearable: true
        }).on('onDataRequestSuccess', function (e, result) {
            console.log('onDataRequestSuccess: ', result);
        }).on('onSetSelectValue', function (e, keyword, data) {
            $('#jxs_queding').find('.inin').html(keyword.key)
            $('#jxs_queding').show()
            $('#jxs_input').hide()
            $('#jxs_input').find('input').val(keyword.id)
            //console.log('onSetSelectValue: ', keyword, data);
        }).on('onUnsetSelectValue', function () {
            console.log("onUnsetSelectValue");
        });

        //品牌搜索补全
        $("#provideName").bsSuggest({
            url: "{:url('select/brands')}",
            /*effectiveFields: ["userName", "shortAccount"],
             searchFields: [ "shortAccount"],*/
            effectiveFieldsAlias:{title: "名称"},
            ignorecase: true,
            showHeader: true,
            showBtn: false,     //不显示下拉按钮
            delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
            idField: "id",
            keyField: "title",
            clearable: true
        }).on('onSetSelectValue', function (e, keyword, data) {
            $(this).val('')
            var bool = false
            $('#renyuan .ren').each(function (idx,o) {
                if($(this).data('id') == keyword.id){
                    bool = true;
                }
            })
            if(bool == false)
                $('#renyuan').append('<span class="ren" data-id="'+keyword.id+'">'+keyword.key+'<span class="close">×</span></span>')


            var data = []
            $('#renyuan .ren').each(function (idx,o) {
                data.push($(o).data('id'))
            })
            data = ''+data.join(',')

            $("#categoryName").bsSuggest('destroy')
            var catbs = $("#categoryName").bsSuggest({
                url: "{:url('select/pro_category')}?keyword="+data,
                effectiveFieldsAlias:{title: "名称"},
                ignorecase: true,
                showHeader: true,
                showBtn: false,     //不显示下拉按钮
                delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
                idField: "id",
                keyField: "title",
                clearable: true
            });
            $("#categoryName").bsSuggest('enable')
            catbs.on('onSetSelectValue', function (e, keyword, data) {
                $(this).val('')
                var bool = false
                $('#renyuan2 .ren').each(function (idx,o) {
                    if($(this).data('id') == keyword.id){
                        bool = true;
                    }
                })
                if(bool == false)
                    $('#renyuan2').append('<span class="ren" data-id="'+keyword.id+'">'+keyword.key+'<span class="close">×</span></span>')
            });

        });
        $("#categoryName").bsSuggest({showBtn: false})
        $("#categoryName").bsSuggest('disable')
        //验证品类
        $('#categoryName').click(function () {
            if(($('#renyuan .ren').length)<1){
                parent.swal('请先选择品牌','','error')
                return false
            }
        })

        //弹出经销商树
        $('#select').click(function () {
            var index = parent.layer.getFrameIndex(window.name)
            parent.layer.open({
                type:2,
                area:['60%','60%'],
                maxmin:true,
                content:'{:url("selectJXS")}?index='+index
            })
            return  false
        })

        //关闭经销商选择
        $('#jxs_queding .close').click(function () {
            $(this).closest('#jxs_queding').hide().find('.inin').html('')
            $('#jxs_input').show().find('input').val('')

        })

        //取消选择品牌
        $('body').on('click','.duoxuan span.close',function () {
            $(this).parent('.ren').remove();
        })

        //弹出品牌树
        $('#select_brands').click(function () {
            var index = parent.layer.getFrameIndex(window.name)
            parent.layer.open({
                type:2,
                area:['60%','60%'],
                maxmin:true,
                content:'{:url("selectBrands")}?index='+index
            })
            return false
        })

        //弹出品类树
        $('#select_category').click(function () {
            if(($('#renyuan .ren').length)<1){
                parent.swal('请先选择品牌','','error')
                return false
            }

            var data = []
            $('#renyuan .ren').each(function (idx,o) {
                data.push($(o).data('id'))
            })
            data = ''+data.join(',')

            var index = parent.layer.getFrameIndex(window.name)
            parent.layer.open({
                type:2,
                area:['60%','60%'],
                maxmin:true,
                content:'{:url("selectCategory")}?index='+index+'&keyword='+data
            })
            return false
        })

        $('#tijiao').click(function () {
            var jxs = $('#remainMan').val()
            var data = []
            $('#renyuan .ren').each(function (idx,o) {
                data.push($(o).data('id'))
            })
            data = ''+data.join(',')
            var data2 = []
            $('#renyuan2 .ren').each(function (idx,o) {
                data2.push($(o).data('id'))
            })
            data2 = ''+data2.join(',')

            var beizhu = $('#beizhu').val()
            var pos = {jxs:jxs,brands:data,category:data2,brief:beizhu}
            {if $s_id}
                pos.s_id = '{$s_id}'
            {/if}
            $.post($('#add').action,pos,function (data) {
                if(data.success){
                    parent.swal(data.msg,'','success')
                    parent.layer.close(parent.layer.getFrameIndex(window.name))
                }else{
                    parent.swal(data.msg,'','error')
                }
            },'json')
            return false
        })
    })
</script>
</body>

</html>